<template>
  <Card :shadow="shadow">
    <i-form ref="formValidate" :model="formValidate" :rules="ruleValidate" label-position="right" :label-width="150">
      <div class="card-name"><div class="name width1">账户信息</div></div>
      <div class="content-con margin">
        <div class="form-item">
          <Row :gutter="24">
            <i-col span="12">
              <Form-item prop="nickname">
                <Row>
                  <i-col span="8" class="ban-left">账户名称</i-col>
                  <i-col span="16"><i-input v-model="formValidate.nickname" size="large" placeholder="请输入账户名称"></i-input></i-col>
                </Row>
              </Form-item>
            </i-col>
            <i-col span="12">
              <Form-item prop="status">
                <Row>
                  <i-col span="8" class="ban-left">账户状态</i-col>
                  <i-col span="16" style="padding-left: 15px;">
                    <Radio-group v-model="formValidate.status" size="large">
                      <Radio label="0"><span>开启</span></Radio>
                      <Radio label="1"><span>关闭</span></Radio>
                    </Radio-group>
                  </i-col>
                </Row>
              </Form-item>
            </i-col>
          </Row>
          <!--<Row :gutter="24">
             <i-col span="12">
              <Form-item prop="merchantId">
                <Row>
                  <i-col span="8" class="ban-left">
                    渠道商户ID
                  </i-col>
                  <i-col span="16">
                    <i-input v-model="formValidate.merchantId" size="large" placeholder="请输入支付渠道商户ID"></i-input>
                  </i-col>
                </Row>
              </Form-item>
            </i-col>
          <i-col span="12">
              <Form-item prop="pollWeight">
                <Row>
                  <i-col span="8" class="ban-left">
                    轮询权重
                  </i-col>
                  <i-col span="16">
                    <i-input v-model="formValidate.pollWeight" size="large" placeholder="请输入轮询权重,1-9之间数字"></i-input>
                  </i-col>
                </Row>
              </Form-item>
            </i-col>
          </Row>-->
          <Row :gutter="24">
            <i-col span="12">
              <Form-item prop="mark">
                <Row>
                  <i-col span="8" class="ban-left">备注</i-col>
                  <i-col span="16"><i-input v-model="formValidate.mark" size="large" placeholder="请输入备注信息"></i-input></i-col>
                </Row>
              </Form-item>
            </i-col>
            <i-col span="12">
              <Form-item prop="status">
                <Row>
                  <i-col span="8" class="ban-left">关联商户</i-col>
                  <i-col span="16" style="padding-left: 15px;">
                    <Select multiple filterable v-model="formValidate.merchants">
                      <Option v-for="item in merData" :value="item.uid" :key="item.uid">{{ item.nickname }}</Option>
                    </Select>
                  </i-col>
                </Row>
              </Form-item>
            </i-col>
          </Row>
        </div>
      </div>
      <div class="card-name"><div class="name width3">人工支付账户配置</div></div>
      <div class="content-con">
        <div class="form-item">
          <Form-item label="操作账号" prop="account"><i-input v-model="formValidate.account" size="large" placeholder="请输入操作账号"></i-input></Form-item>
          <Form-item label="账号密码" prop="pwd"><i-input v-model="formValidate.pwd" type="password" size="large" placeholder="请输入操作账号密码"></i-input></Form-item>
          <Form-item label="并发量" prop="concurrent"><i-input v-model="formValidate.concurrent" size="large" placeholder="请输入并发量"></i-input></Form-item>
          <Form-item label="单笔最小金额" prop="min_amount"><i-input v-model="formValidate.min_amount" size="large" placeholder="请输入单笔最小金额(区间1)"></i-input></Form-item>
          <Form-item label="单笔最大金额" prop="max_amount"><i-input v-model="formValidate.max_amount" size="large" placeholder="请输入单笔最大金额(区间1)"></i-input></Form-item>

          <Form-item label="佣金模式" prop="brokerage_model">
            <RadioGroup v-model="formValidate.brokerage_model" on-change="brokerageSelect">
              <Radio label="0" border><span>固定佣金</span></Radio>
              <Radio label="1" border><span>比例佣金</span></Radio>
            </RadioGroup>
          </Form-item>
          <Form-item label="固定佣金" prop="fixed_brokerage" v-if="formValidate.brokerage_model == 0">
            <i-input v-model="formValidate.fixed_brokerage" size="large" placeholder="请输入固定佣金(没有填0)"></i-input>
          </Form-item>
          <Form-item label="比例佣金(%)" prop="scale_brokerage" v-else>
            <i-input v-model="formValidate.scale_brokerage" size="large" placeholder="请输入比例佣金(没有填0,百分比例)"></i-input>
          </Form-item>
        </div>
        <Form-item class="ban-btn">
          <i-button @click="handleSubmit()" class="save" size="large">保存</i-button>
          <i-button class="save" size="large" @click="btnClick1">返回</i-button>
        </Form-item>
      </div>
    </i-form>
  </Card>
</template>
<script>
import { list } from '@/api/merchants'
import { add } from '@/api/artifi'
import { mapMutations } from 'vuex'
export default {
  name: 'staff-add',
  props: {
    shadow: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      formValidate: {
        user_type: '1',
        nickname: '',
        status: '0',
        mark: '',
        account: '',
        pwd: '',
        concurrent: '5',
        min_amount: '',
        max_amount: '',
        brokerage_model: '0',
        fixed_brokerage: '',
        scale_brokerage: '',
        merchants: []
      },
      ruleValidate: {
        nickname: [
          {
            required: true,
            message: '请输入账户名称',
            trigger: 'blur'
          }
        ],
        merchants: [
          {
            required: true,
            type: 'array',
            message: '至少选择一个角色',
            trigger: 'change'
          }
        ],
        status: [
          {
            required: true,
            message: '请选择状态',
            trigger: 'change'
          }
        ],

        account: [
          {
            required: true,
            message: '请输入操作账号',
            trigger: 'blur'
          }
        ],
        pwd: [
          {
            required: true,
            message: '请输入操作账号密码',
            trigger: 'blur'
          }
        ],

        min_amount: [
          {
            required: true,
            message: '请输入单笔最小金额',
            trigger: 'blur'
          }
        ],
        max_amount: [
          {
            required: true,
            message: '请输入单笔最大金额',
            trigger: 'blur'
          }
        ]
      },
      merData: []
    }
  },
  created () {
    this.getMerData()
  },
  methods: {
    ...mapMutations(['closeTag']),
    close () {
      this.closeTag({
        name: 'staff-add'
      })
    },
    getMerData () {
      const query = {
        type: 0,
        keyword: '',
        pageSize: 100,
        pageCurrent: 1
      }
      list(query)
        .then(res => {
          this.merData = res.data.data
        })
        .catch(err => {
          this.$Message.error(err.msg)
        })
    },

    // 返回按钮
    btnClick1 () {
      this.close()
    },
    // 表单验证
    handleSubmit () {
      this.$refs['formValidate'].validate(valid => {
        if (valid) {
          add(this.formValidate)
            .then(res => {
              this.$Message.success(res.msg)
              setTimeout(() => this.close(), 1000)
            }).catch(err => {
              this.$Message.error(err.msg)
            })
        } else {
          this.$Message.error('表单验证失败!')
        }
      })
    }
  }
}
</script>
<style lang="less">
.margin {
  margin-bottom: 20px !important;
}
</style>
